<template>
  <div
    class="left"
    :style="{
      backgroundImage: 'url(' + bgUrl + ')',
    }"
  >
    <main class="flex flex-col h-[100vh]">
      <div class="flex items-center cursor-pointer -enter-x mt-4">
        <img src="../../../assets/images/LOGO.png" class="w-12 h-12" />
        <span class="text-[#fefeff] text-3xl font-bold ml-4">{{ title }}</span>
      </div>
      <img
        src="../../../assets/svg/login-box-bg.svg"
        class="max-w-[24vw] min-w-[350px] mt-[160px] h-[267px] -enter-x"
      />
      <span class="text-light-50 text-3xl mt-4 -enter-x">考试系统后台</span>
      <span class="text-light-400 text-sm mt-6 -enter-x">输入您的个人详细信息开始使用！</span>
    </main>
  </div>
</template>

<script setup lang="ts">
  import loginbg from '@/assets/svg/login-bg.svg';
  import darkLoginBg from '@/assets/svg/login-bg-dark.svg';
  import { useUtilsStoreWithOut } from '@/stores/modules/utils';

  const title = import.meta.env.VITE_GLOB_APP_TITLE;
  let bgUrl = ref(loginbg);

  // 根据深色模式更换背景图
  const { isDark } = storeToRefs(useUtilsStoreWithOut());
  watch(
    () => isDark.value,
    () => {
      isDark.value ? (bgUrl.value = darkLoginBg) : (bgUrl.value = loginbg);
    },
    {
      immediate: true,
    }
  );
</script>

<style scoped>
  .left {
    @apply flex-1 h-full flex justify-center flex-col pt-10 pl-20;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
  }
</style>
